import { useState } from 'react';
import { Button, Modal } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import ShowModal from './components/modal';

const { confirm } = Modal
const valueEnum = {
    0: 'close',
    1: 'running',
    2: 'online',
    3: 'error',
};

export type TableListItem = {
    key: number;
    name: string;
    containers: number;
    creator: string;
    status: string;
    createdAt: number;
    memo: string;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
        key: i,
        name: 'AppName',
        containers: Math.floor(Math.random() * 20),
        creator: creators[Math.floor(Math.random() * creators.length)],
        status: valueEnum[Math.floor(Math.random() * 10) % 4],
        createdAt: Date.now() - Math.floor(Math.random() * 100000),
        memo: i % 2 === 1 ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' : '简短备注文案',
    });
}



export default () => {
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
    const [title, setTitle] = useState<string>('新增')
    const [rowData, setRowData] = useState<any>({});

    const handleCreate = () => {
        setIsModalVisible(true);
        setTitle("add")
    }

    const handleDelete = () => {
        confirm({
            title: "删除",
            content: "确定要删除吗？",
            onOk: async () => {

            },
            cancelText: "取消",
            okText: "确定",
        });
    }

    const handleEdit = (record: TableListItem) => {
        setIsModalVisible(true)
        setTitle("edit")
        setRowData(record)
    }

    const handleShow = (record: TableListItem) => {
        setIsModalVisible(true)
        setTitle("show")
        setRowData(record)
    }

    const columns: ProColumns<TableListItem>[] = [
        {
            title: '表单名称',
            width: 80,
            dataIndex: 'name',
            render: (_) => <a>{_}</a>,
        },
        {
            title: '表单标识',
            dataIndex: 'containers',
            width: 100,
            valueEnum: {
                all: { text: '全部' },
                付小小: { text: '付小小' },
                曲丽丽: { text: '曲丽丽' },
                林东东: { text: '林东东' },
                陈帅帅: { text: '陈帅帅' },
                兼某某: { text: '兼某某' },
            },
        },
        {
            title: '表单类型',
            width: 80,
            dataIndex: 'status',
            search: false,

        },
        {
            title: '表单路径',
            width: 80,
            dataIndex: 'creator',
            search: false,
        },
        {
            title: '表单识别',
            width: 140,
            dataIndex: 'createdAt',
            search: false,
        },
        {
            title: '操作',
            width: 180,
            key: 'option',
            valueType: 'option',
            render: (_,record) => [
                <a key="link" onClick={() => handleEdit(record)}>编辑</a>,
                <a key="link" onClick={() => handleShow(record)}>查看</a>,
                <a key="link">设计</a>,
                <a key="link" onClick={() => handleDelete()}>删除</a>,
            ],
        },
    ];
    return (
        <PageContainer>
            <ProTable<TableListItem>
                columns={columns}
                request={(params, sorter, filter) => {
                    return Promise.resolve({
                        data: tableListDataSource,
                        success: true,
                    });
                }}
                rowKey="key"
                dateFormatter="string"
                headerTitle="表单列表"
                toolBarRender={() => [
                    <Button type="primary" key="primary" onClick={() => handleCreate()}>
                        新增
                    </Button>,
                ]}
            />
            <ShowModal isModalVisible={isModalVisible} title={title} onCancel={() => setIsModalVisible(false)} rowData={rowData} />
        </PageContainer>
    );
};